<template>
  <div class="employees-container">
    <!-- 提前定义好的类名, 加padding -->
    <div class="app-container">
      <el-card v-loading="loading" class="tree-card">
        <!-- 用了一个行列布局 -->
        <TreeToois :node-data="company" root @showAddDept="showAddDept" />

        <!-- 主题树形结构 -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <template #default="{ data }">
            <TreeToois
              :node-data="data"
              @delList="getDepartments"
              @showAddDept="showAddDept"
              @editDept="editDept"
            />
          </template>
        </el-tree>

        <!-- 添加部门 -->
        <AddDept
          ref="addDept"
          :is-show.sync="isShow"
          :node-data="nodeData"
          :dept-list="deptList"
          @clickSubmit="getDepartments"
        />
        <!-- ---- -->
      </el-card>
    </div>
  </div>
</template>

<script>
// api ,
import { reqGetDepartments } from '@/api/departments'

import TreeToois from './componets/TreeToois.vue'
import AddDept from './componets/AddDept.vue'
import { tranListToTreeData } from '@/utils/index'
export default {
  name: 'Departments',
  components: {
    TreeToois,
    AddDept
  },
  data() {
    return {
      // department部门 处理好的树形数据
      departs: [],
      // 类表型的数据
      deptList: [],
      // 改名用
      defaultProps: {
        label: 'name'
      },
      // 头部的信息
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
      // 控制dailog对话框
      isShow: false,
      // 保留新增子部门是的父级部门数据/编辑将来能够修改自己的部门信息
      nodeData: {},
      loading: false
    }
  },
  created() {
    // 获取部门列表
    this.getDepartments()
  },
  methods: {
    // 获取部门列表
    async getDepartments() {
      this.loading = true
      const {
        data: { depts }
      } = await reqGetDepartments()
      // 列表数据转化树形数据
      const list = tranListToTreeData(depts, '')

      // 处理好的数据
      this.departs = list

      // 存一份列表形的数据
      this.deptList = depts

      this.loading = false
      // 校验第一个名字重复 的问题
      this.company.id = ''
    },
    // 添加部门对话框显示,并且保留信息
    showAddDept(nodeData) {
      this.isShow = true
      // 存储传过来的数据, 这个应该记录下来, 将来添加需要用到
      this.nodeData = nodeData
    },
    // 添加编辑
    editDept(nodeData) {
      this.isShow = true
      this.nodeData = nodeData
      this.$refs.addDept.getDepartDetail(nodeData.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
